<template>
  <div class="app-container">
    <!-- 模板搜索和操作 -->
    <div class="template-controls-top">
      <div class="template-search-top">
        <el-input
          v-model="templateQueryParams.title"
          placeholder="搜索模板标题"
          size="small"
          clearable
          @keyup.enter.native="handleTemplateQuery"
          @clear="handleTemplateQuery"
          class="template-search-input-top"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleTemplateQuery"
            size="small"
          ></el-button>
        </el-input>
      </div>
      <div class="template-actions-top">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleTemplateAdd"
          v-hasPermi="['api:template:add']"
        >新增模板</el-button>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          :disabled="!selectedTemplate"
          @click="handleTemplateUpdate"
          v-hasPermi="['api:template:edit']"
        >修改</el-button>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          :disabled="!selectedTemplate"
          @click="handleTemplateDelete"
          v-hasPermi="['api:template:remove']"
        >删除</el-button>
      </div>
    </div>

    <div class="rescue-layout">
      <!-- 左侧：模板列表 -->
      <div class="panel panel--templates">
        <div class="panel-header">
          <i class="el-icon-folder-opened filter-icon"></i>
          <span class="panel-title">模板列表</span>
        </div>
        
        <!-- 业务类型切换（集成到模板面板中） -->
        <div class="template-type-tabs">
          <div class="custom-tabs-compact">
            <div 
              class="tab-item-compact" 
              :class="{ active: activeTab === 'trailer' }" 
              @click="switchTab('trailer')"
            >
              <i class="el-icon-truck"></i>
              <span>拖车</span>
            </div>
            <div 
              class="tab-item-compact" 
              :class="{ active: activeTab === 'minor' }" 
              @click="switchTab('minor')"
            >
              <i class="el-icon-setting"></i>
              <span>小修</span>
            </div>
            <div class="tab-indicator-compact" :class="`tab-indicator-compact--${activeTab}`"></div>
          </div>
        </div>
        

        
        <el-scrollbar class="template-scroll" :class="{ 'with-type-tabs': true }">
          <div
            v-for="t in templateList"
            :key="t.id"
            class="template-card"
            :class="{ active: templateId === t.id }"
            @click="selectTemplate(t)"
          >
            <div class="template-card__header">
              <div class="template-card__title">{{ t.title }}</div>
              <div class="template-card__actions">
                <i class="el-icon-more"></i>
              </div>
            </div>
            
            <div class="template-card__content">
              <div v-if="activeTab == 'minor' && t.businessType" class="template-card__business">
                <dict-tag
                  :options="dict.type.xiaoxiu"
                  :value="t.businessType"
                />
              </div>
              
              <div class="template-card__time">
                <i class="el-icon-time"></i>
                <span>{{ t.createTime }}</span>
              </div>
            </div>
          </div>
          <div v-if="!templateList || templateList.length === 0" class="empty-state">
            <i class="el-icon-folder-opened"></i>
            <p>暂无模板数据</p>
          </div>
        </el-scrollbar>
      </div>

      <!-- 中间：流程列表 -->
      <div class="panel panel--processes">
        <div class="panel-header">
          <i class="el-icon-connection filter-icon"></i>
          <span class="panel-title">流程</span>
        </div>
        <div v-if="!templateId" class="empty-tip">请先选择左侧模板</div>
        <div v-else class="process-list">
          <div
            v-for="p in processList"
            :key="p.dictValue"
            class="process-item"
            :class="{ active: info && info.dictValue === p.dictValue }"
            @click="selectProcess(p)"
          >
            <div class="process-item__name">{{ p.dictLabel }}</div>
            <el-button
              size="mini"
              type="primary"
              @click.stop="openEditor(p)"
              v-hasPermi="['api:rescue:edit']"
            >配置</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗：流程配置 -->
    <el-dialog
      :title="title || '编辑救援照片配置'"
      :visible.sync="open"
      width="85%"
      append-to-body
    >
      <div class="operation-container">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['api:rescue:add']"
        >新增</el-button>
      </div>

      <el-table
        :data="rescueList"
        border
        class="rescue-table"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" align="center" prop="id" />
        <el-table-column label="流程" align="center" prop="process">
          <template slot-scope="scope">{{ getProcess(scope.row.processNodeCode) }}</template>
        </el-table-column>
        <el-table-column v-if="activeTab === 'minor'" label="业务类型" align="center" prop="businessType">
          <template slot-scope="scope">
            <dict-tag
              :options="businessTypeOptions"
              :value="scope.row.businessType"
            />
          </template>
        </el-table-column>
        <el-table-column label="模板照片" align="center" prop="img">
          <template slot-scope="scope">
            <image-upload :limit="1" v-model="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column label="环节名称" align="center" prop="title">
          <template slot-scope="scope">
            <el-input v-model="scope.row.title" size="small" placeholder="请输入环节名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否必拍" align="center" prop="img">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.required" size="small">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="title">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.orderNum" size="small" :min="1" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row, scope.$index)"
              v-hasPermi="['api:rescue:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 模板增删改查对话框 -->
    <el-dialog :title="templateDialogTitle" :visible.sync="templateDialogOpen" width="500px" append-to-body>
      <el-form ref="templateForm" :model="templateForm" :rules="templateRules" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="templateForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-input v-model="templateForm.source" placeholder="请输入来源" />
        </el-form-item>
        <el-form-item label="救援类型" prop="type">
          <el-select 
            v-model="templateForm.type" 
            placeholder="请选择救援类型"
            clearable
            @change="handleRescueTypeChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in rescueTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="businessType" v-if="templateForm.type">
          <el-select 
            v-model="templateForm.businessType" 
            placeholder="请选择二级分类"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in subCategoryOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTemplateForm">确 定</el-button>
        <el-button @click="cancelTemplate">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRescue, delRescue, addByList, getDicts } from "../../../api/api/rescue";
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/api/template";
import DictTag from "@/components/DictTag";

export default {
  name: "Rescue",
  dicts: ["xiaoxiu"],
  components: {
    DictTag
  },
  data() {
    return {
      // Tab：trailer 拖车 / minor 小修
      activeTab: "trailer",
      templateId: "",
      selectedTemplate: null,
      info: {},
      // 模板相关
      templateQueryParams: {
        pageNum: 1,
        pageSize: 50,
        title: null,
        source: null,
      },
      templateDialogOpen: false,
      templateDialogTitle: "",
      templateForm: {},
      templateRules: {
        source: [
          { required: true, message: "来源不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "救援类型不能为空", trigger: "change" }
        ],
      },
      // 救援类型相关数据
      rescueTypeOptions: [],
      subCategoryOptions: [],
      // 业务类型选项（用于字典标签显示）
      businessTypeOptions: [],
      dataList: [
        { name: "验车", value: "6" },
        { name: "救援过程", value: "7" },
        { name: "牵引上板", value: "8" },
        { name: "辅助轮与装车完毕", value: "9" },
        { name: "目的地卸车报数收款生成工单", value: "10" },
      ],
      processList: [
        // { name: "验车", value: "6" },
        // { name: "装车", value: "1" },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 救援照片默认配置表格数据
      rescueList: [],
      // 弹窗控制
      open: false,
      title: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        img: null,
        title: null,
        required: null,
        orderNum: null,
        process: null,
      },
      templateList: [],
    };
  },
  created() {
    this.temGetList();
    // 根据当前 Tab 载入流程字典
    this.loadProcessDict();
    // 加载救援类型字典
    this.loadRescueTypeOptions();
    // 加载业务类型字典（用于字典标签显示）
    this.loadBusinessTypeOptions();
  },
  methods: {
    /**
     * Tab 切换：重置必要状态并加载对应流程字典
     */
    handleTabChange() {
      this.info = {};
      this.rescueList = [];
      // 切换tab时清空当前选中的模板
      this.templateId = "";
      this.selectedTemplate = null;
      // 清空业务类型选项
      this.businessTypeOptions = [];
      this.loadProcessDict();
      // 重新加载对应类型的模板列表
      this.temGetList();
    },
    /**
     * 自定义 Tab 切换
     */
    switchTab(tabName) {
      this.activeTab = tabName;
      this.handleTabChange();
    },
    /**
     * 载入流程字典：拖车 => data_required_node，小修 => small_required_node
     */
    loadProcessDict() {
      const dictKey = this.activeTab === "minor" ? "small_required_node" : "data_required_node";
      getDicts(dictKey).then((response) => {
        this.processList = response.data || [];
      });
    },
    /**
     * 加载救援类型字典数据
     */
    loadRescueTypeOptions() {
      getDicts("tuoche_or_xiaoxiu").then((response) => {
        this.rescueTypeOptions = response.data || [];
      }).catch(error => {
        console.error("加载救援类型字典失败:", error);
        this.rescueTypeOptions = [];
      });
    },
    /**
     * 救援类型变更处理
     * 根据选中的救援类型的dictValue加载对应的二级分类
     */
    handleRescueTypeChange(value) {
      // 清空二级分类选择
      this.templateForm.businessType = null;
      this.subCategoryOptions = [];
      
      if (!value) {
        return;
      }
      
      // 直接使用选中的dictValue作为字典类型来加载二级分类
      getDicts(value).then((response) => {
        this.subCategoryOptions = response.data || [];
        // 同时更新业务类型选项（用于列表显示）
        this.businessTypeOptions = (response.data || []).map(item => ({
          label: item.dictLabel,
          value: item.dictValue
        }));
      }).catch(error => {
        console.error("加载二级分类字典失败:", error);
        this.subCategoryOptions = [];
        this.businessTypeOptions = [];
        this.$message.warning("加载二级分类失败，请重试");
      });
    },
    /**
     * 加载业务类型字典（用于字典标签显示）
     */
    loadBusinessTypeOptions() {
      // 获取当前选中的救援类型
      if (this.templateForm && this.templateForm.type) {
        getDicts(this.templateForm.type).then((response) => {
          this.businessTypeOptions = (response.data || []).map(item => ({
            label: item.dictLabel,
            value: item.dictValue
          }));
        }).catch(error => {
          console.error("加载业务类型字典失败:", error);
          this.businessTypeOptions = [];
        });
      }
    },
    /**
     * 为小修模式加载业务类型字典
     */
    loadBusinessTypeForMinor() {
      // 使用固定的小修业务类型字典
      getDicts("xiaoxiu").then((response) => {
        this.businessTypeOptions = (response.data || []).map(item => ({
          label: item.dictLabel,
          value: item.dictValue
        }));
      }).catch(error => {
        console.error("加载小修业务类型字典失败:", error);
        this.businessTypeOptions = [];
      });
    },
    /**
     * 获取模板列表
     * @returns {void}
     */
    temGetList() {
      // 根据当前tab状态设置type参数
      const queryParams = {
        ...this.templateQueryParams,
        type: this.activeTab === 'trailer' ? 'tuoche' : 'xiaoxiu'
      };
      
      listTemplate(queryParams).then((response) => {
        this.templateList = response.rows;
        if (this.templateList && this.templateList.length > 0 && !this.templateId) {
          this.templateId = this.templateList[0].id;
          this.selectedTemplate = this.templateList[0];
        }
      });
    },
    /**
     * 查询救援照片默认配置列表
     * @param {Object} [processParam] 可选，流程字典项
     * @returns {void}
     */
    getList(processParam) {
      const current = processParam || this.info;
      if (!this.templateId || !current || !current.dictValue) return;
      this.queryParams.processNodeCode = current.dictValue;
      this.queryParams.templateId = this.templateId;
      this.queryParams.repairType = null;
      
      listRescue(this.queryParams).then((response) => {
        // 确保每条数据绑定当前模板与流程，避免跨模板串联
        this.rescueList = (response.rows || []).map((row) => ({
          ...row,
          templateId: this.templateId,
          processNodeCode: current.dictValue,
          repairType: null,
        }));
        this.total = response.total;
      });
    },
    /**
     * 选择模板
     * @param {Object} tmpl 模板对象
     * @returns {void}
     */
    selectTemplate(tmpl) {
      this.templateId = tmpl.id;
      this.selectedTemplate = tmpl;
      this.info = {};
      this.rescueList = [];
      this.open = false;
    },
    /**
     * 选择流程并载入配置
     * @param {Object} row 流程字典项
     * @returns {void}
     */
    selectProcess(row) {
      if (!this.templateId) {
        this.$message.error("请先选择模板！");
        return;
      }
      this.info = row;
      this.getList(row);
      // 如果是小修模式，加载业务类型字典
      if (this.activeTab === 'minor') {
        this.loadBusinessTypeForMinor();
      }
    },
    /**
     * 打开流程配置弹窗
     * @param {Object} row 流程字典项
     * @returns {void}
     */
    openEditor(row) {
      if (!this.templateId) {
        this.$message.error("请先选择模板！");
        return;
      }
      this.info = row;
      this.title = `配置 - ${row.dictLabel || ''}`;
      this.getList(row);
      // 如果是小修模式，加载业务类型字典
      if (this.activeTab === 'minor') {
        this.loadBusinessTypeForMinor();
      }
      this.open = true;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.rescueList.push({
        id: "",
        img: "",
        title: "",
        process: this.info.value,
        orderNum: 0,
        templateId: this.templateId,
        processNodeCode: this.info.dictValue,
        repairType: null,
      });
      console.log(this.rescueList, "this.rescueList");
    },

    getProcess(val) {
      // 优先从当前流程字典中匹配
      const hit = (this.processList || []).find((d) => d && d.dictValue === val);
      if (hit && hit.dictLabel) return hit.dictLabel;
      // 兼容旧映射
      const fallback = {
        checkVehicle: "验车",
        onSiteRescue: "救援过程",
        arriveDestination: "到达目的地",
        completePayment: "费用补齐环节",
        unloadVehicle: "卸车环节",
      };
      return fallback[val] || val;
    },
    /** 提交按钮 */
    submitForm() {
      // 提交前强制写入当前模板与流程，避免后端误归属
      const payloadList = (this.rescueList || []).map((item) => ({
        ...item,
        templateId: this.templateId,
        processNodeCode: this.info && this.info.dictValue ? this.info.dictValue : item.processNodeCode,
        required: typeof item.required === 'number' ? item.required : (item.required ? 1 : 0),
        repairType: null,
      }));
      let params = { rescueImgTypeList: payloadList };
      addByList(params).then((response) => {
        this.$modal.msgSuccess("修改成功");
      });
    },
    /**
     * 关闭弹窗
     * @returns {void}
     */
    cancel() {
      this.open = false;
    },
    /** 删除按钮操作 */
    handleDelete(row, index) {
      if (row.id) {
        const ids = row.id || this.ids;
        this.$modal
          .confirm('是否确认删除救援照片默认配置编号为"' + ids + '"的数据项？')
          .then(function () {
            return delRescue(ids);
          })
          .then(() => {
            this.getList(this.info);
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        this.rescueList.splice(index, 1);
        this.$modal.msgSuccess("删除成功");
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "api/rescue/export",
        {
          ...this.queryParams,
        },
        `rescue_${new Date().getTime()}.xlsx`
      );
    },
    
    // ========== 模板管理相关方法 ==========
    
    /** 模板搜索 */
    handleTemplateQuery() {
      this.templateQueryParams.pageNum = 1;
      this.temGetList();
    },
    
    /** 模板新增 */
    handleTemplateAdd() {
      this.resetTemplateForm();
      this.templateDialogOpen = true;
      this.templateDialogTitle = "添加模板";
    },
    
    /** 模板修改 */
    handleTemplateUpdate() {
      if (!this.selectedTemplate) {
        this.$message.warning("请先选择要修改的模板");
        return;
      }
      this.resetTemplateForm();
      getTemplate(this.selectedTemplate.id).then(response => {
        this.templateForm = response.data;
        // 如果模板有救援类型，需要加载对应的二级分类
        if (this.templateForm.type) {
          this.handleRescueTypeChange(this.templateForm.type);
        }
        this.templateDialogOpen = true;
        this.templateDialogTitle = "修改模板";
      });
    },
    
    /** 模板删除 */
    handleTemplateDelete() {
      if (!this.selectedTemplate) {
        this.$message.warning("请先选择要删除的模板");
        return;
      }
      this.$modal.confirm('是否确认删除模板"' + this.selectedTemplate.title + '"？').then(() => {
        return delTemplate(this.selectedTemplate.id);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        // 如果删除的是当前选中的模板，清空选择
        if (this.templateId === this.selectedTemplate.id) {
          this.templateId = "";
          this.selectedTemplate = null;
          this.info = {};
          this.rescueList = [];
        }
        this.temGetList();
      }).catch(() => {});
    },
    
    /** 模板表单重置 */
    resetTemplateForm() {
      this.templateForm = {
        id: null,
        title: null,
        source: null,
        type: null,
        businessType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      // 重置二级分类选项
      this.subCategoryOptions = [];
      this.$nextTick(() => {
        if (this.$refs.templateForm) {
          this.$refs.templateForm.resetFields();
        }
      });
    },
    
    /** 模板表单提交 */
    submitTemplateForm() {
      this.$refs["templateForm"].validate(valid => {
        if (valid) {
          // 确保提交时包含当前tab对应的type值
          const formData = {
            ...this.templateForm,
            type: this.activeTab === 'trailer' ? 'tuoche' : 'xiaoxiu'
          };
          
          if (this.templateForm.id != null) {
            updateTemplate(formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.templateDialogOpen = false;
              this.temGetList();
            });
          } else {
            addTemplate(formData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.templateDialogOpen = false;
              this.temGetList();
            });
          }
        }
      });
    },
    
    /** 模板对话框取消 */
    cancelTemplate() {
      this.templateDialogOpen = false;
      this.resetTemplateForm();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px;
}

/* 顶部模板控件 */
.template-controls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.template-search-top {
  flex: 1;
  max-width: 300px;
}

.template-search-input-top {
  width: 100%;
}

.template-search-input-top ::v-deep .el-input__inner {
  border-radius: 8px 0 0 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  transition: all 0.2s ease;
}

.template-search-input-top ::v-deep .el-input__inner:hover {
  border-color: #6366f1;
}

.template-search-input-top ::v-deep .el-input__inner:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.template-search-input-top ::v-deep .el-input-group__append {
  border-radius: 0 8px 8px 0;
  border: 1px solid #d1d5db;
  border-left: none;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.template-search-input-top ::v-deep .el-input-group__append .el-button {
  border: none;
  background: transparent;
  color: #6366f1;
  padding: 0 16px;
  height: 34px;
  transition: all 0.2s ease;
}

.template-search-input-top ::v-deep .el-input-group__append .el-button:hover {
  color: #4f46e5;
  transform: scale(1.05);
}

.template-actions-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.template-actions-top .el-button {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.template-actions-top .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.filter-icon {
  font-size: 22px;
  color: #4f46e5;
  margin-right: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rescue-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  min-height: calc(100vh - 140px);
}

.panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.template-scroll {
  height: calc(100% - 40px);
}

.template-scroll.with-type-tabs {
  height: calc(100% - 100px);
}



/* 模板面板内的类型切换 */
.template-type-tabs {
  padding: 12px;
  margin-bottom: 8px;
}

.custom-tabs-compact {
  position: relative;
  display: flex;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid #d1d5db;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-item-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #64748b;
  font-weight: 500;
  font-size: 13px;
  position: relative;
  z-index: 2;
  flex: 1;
  justify-content: center;
  min-height: 36px;
}

.tab-item-compact i {
  font-size: 14px;
  transition: all 0.3s ease;
}

.tab-item-compact:hover:not(.active) {
  color: #475569;
  background: rgba(255, 255, 255, 0.3);
}

.tab-item-compact:hover:not(.active) i {
  transform: scale(1.1);
}

.tab-item-compact.active {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tab-item-compact.active i {
  color: #ffffff;
  transform: scale(1.05);
}

.tab-indicator-compact {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 7px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 12px rgba(102, 126, 234, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 1;
  width: calc(50% - 2px);
}

.tab-indicator-compact--trailer {
  left: 4px;
  transform: translateX(0);
}

.tab-indicator-compact--minor {
  left: 4px;
  transform: translateX(calc(100% + 4px));
}



/* 现代化卡片式设计 */
.template-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.template-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #e5e7eb, #e5e7eb);
  transition: all 0.3s ease;
}

.template-card:hover {
  border-color: #e2e8f0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.template-card:hover::before {
  background: linear-gradient(to bottom, #6366f1, #8b5cf6);
}

.template-card.active {
  border-color: #6366f1;
  background: linear-gradient(135deg, #fefffe 0%, #f8faff 100%);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

.template-card.active::before {
  background: linear-gradient(to bottom, #6366f1, #8b5cf6);
  width: 4px;
}

/* 卡片头部 */
.template-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}

.template-card__title {
  font-weight: 600;
  font-size: 15px;
  color: #1e293b;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
}

.template-card__actions {
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #9ca3af;
  font-size: 16px;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
}

.template-card:hover .template-card__actions {
  opacity: 1;
}

.template-card__actions:hover {
  background: #f3f4f6;
  color: #6b7280;
}

/* 卡片内容区域 */
.template-card__content {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-card__business {
  display: flex;
  align-items: center;
}

.template-card__business ::v-deep .el-tag {
  height: 22px;
  line-height: 20px;
  font-size: 11px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 500;
}

.template-card__time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-top: auto;
}

.template-card__time i {
  font-size: 13px;
  color: #94a3b8;
}

/* 空状态优化 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #9ca3af;
  text-align: center;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #d1d5db;
}

.empty-state p {
  font-size: 14px;
  margin: 0;
  color: #6b7280;
}

@media (max-width: 1200px) {
  .rescue-layout { 
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .panel--templates {
    order: 1;
  }
  .panel--processes {
    order: 2;
  }
}

.process-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}
.process-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
}
.process-item.active { border-color: #6366f1; background: #eef2ff; }
.process-item__name { font-weight: 500; color: #1f2937; }

.empty-tip {
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}

.operation-container {
  margin-bottom: 15px;
}

.el-input-number {
  width: 100px;
}

.editor-footer {
  text-align: right;
  margin-top: 10px;
}

/* 弹窗样式与主页面风格统一 */
::v-deep .el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
::v-deep .el-dialog__header {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
}
::v-deep .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #6b7280;
}
::v-deep .el-dialog__body {
  padding: 12px 16px 8px;
  background: #ffffff;
  max-height: 65vh;
  overflow: auto;
}
::v-deep .el-dialog__footer {
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
}

/* 表格与分页风格统一 */
::v-deep .el-table {
  border-radius: 10px;
  overflow: hidden;
}
::v-deep .el-table th {
  background-color: #f8fafc;
  color: #374151;
}
::v-deep .pagination-container {
  padding: 8px 0 0;
}

/* 紧凑行样式（仅限弹窗表格） */
.rescue-table ::v-deep .el-table__row {
  height: 38px;
}
.rescue-table ::v-deep .cell {
  padding-top: 6px;
  padding-bottom: 6px;
}
</style>
